<template>
  <div class="default-message">
    <div class="content-nav">
      <nav>
        <a
          class="nav1"
          v-for="(item, index) in navList"
          :key="index"
          @click="jump(index)"
          :class="index==current?'current':''"
        >{{item}}</a>
      </nav>
    </div>
    <div class="back-top">
      <a-back-top :target="getElement">
        <div class="ant-back-top-content">
          <div class="ant-back-top-icon"></div>
        </div>
      </a-back-top>
    </div>
    <div class="detail-content" id="detail-content" @scroll="dataScroll">
      <div class="section text-content">
        <div class="btn-content">
          <i class="suncnui suncnui-icon-yinyong" @click="handlerClick()">引用</i>
        </div>
        <h2>习近平谈云冈石窟：这是人类文明的瑰宝，要坚持保护第一</h2>
        <div class="message-content">
          时间：
          <span>2020-05-12 09:04:48</span>来源:
          <span>新华社“新华视点”微博</span>
        </div>
        <div class="text-content-detail">
          <p>11日傍晚时分，习近平总书记来到大同云冈石窟考察历史文化遗产保护工作。石窟规模恢弘，一件件雕塑艺术精湛，一尊尊造像栩栩如生。习近平走进洞窟仔细察看雕塑、壁画，详细询问石窟开凿历史、艺术风格、文物保护等情况。习近平说，云冈石窟体现了中华文化的特色和中外文化交流的历史。这是人类文明的瑰宝，要坚持保护第一，在保护的基础上研究利用好。（文字记者：张晓松、朱基钗 摄影记者：李学仁、谢环驰、刘彬）</p>
          <img
            src="http://www.people.com.cn/mediafile/pic/20200825/4/17402655145949040412.jpg"
            alt
            srcset
          />
          <p>据马鞍山日报报道 8月24日上午，马鞍山市委召开常委会扩大会议，传达学习习近平总书记视察安徽重要讲话精神、在扎实推进长三角一体化发展座谈会上的重要讲话精神，落实省委常委会扩大会议精神，部署安排我市贯彻落实工作。马鞍山市委书记张岳峰主持会议并讲话。他强调，要把学习宣传贯彻习近平总书记视察安徽重要讲话精神作为当前和今后一个时期的重大政治任务，增强“四个意识”、坚定“四个自信”、做到“两个维护”，以习近平总书记视察为强大动力和新的起点，奋勇争先、奋发有为、奋力拼搏，不断谱写“生态福地、智造名城”建设新篇章，以实际行动回报习近平总书记的亲切关怀和殷切期望。袁方、钱沙泉、吴劲等市四套班子领导出席。</p>
        </div>
      </div>
      <div class="section hot-map-content">
        <a-card :bordered="false" class="card-content">
          <div class="action-content">
            <a-row :gutter="16">
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <div class="action-title">
                  <span>
                    <i>阅读数</i>
                    <big>1.2W</big>
                  </span>
                  <circuitEcharts ref="echarts06" id="echarts06" :data="echarts06Data"></circuitEcharts>
                </div>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <div class="action-title">
                  <span>
                    <i>评价数</i>
                    <big>1.2W</big>
                  </span>
                  <circuitEcharts
                    title="评论数占比分析"
                    ref="echarts07"
                    id="echarts07"
                    :data="echarts06Data"
                  ></circuitEcharts>
                </div>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <div class="action-title">
                  <span>
                    <i>点赞数</i>
                    <big>1.2W</big>
                  </span>
                  <circuitEcharts
                    title="点赞数占比分析"
                    ref="echarts08"
                    id="echarts08"
                    :data="echarts06Data"
                  ></circuitEcharts>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <div class="time-line-content">
            <timeLine ref="timeLine" :timeLineList="timeLineList" />
          </div>
          <div class="reference-content">
            <div class="btn-content">
              <i class="suncnui suncnui-icon-yinyong" @click="handlerClick()">引用</i>
            </div>
            <h3>习近平谈云冈石窟：这是人类文明的瑰宝，要坚持保护第一</h3>
            <div class="keywords">
              <span>关键词：</span>
              <span v-for="(item,index) in keywordList" :key="index">{{item}}</span>
            </div>
            <div class="abstract-content">
              <div class="abstract-title">
                <p>智能摘要</p>
              </div>
              <div class="abstract-detail-content">
                <p>
                  企业家是经济活动的重要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的
                  不断涌现，为积累社会财富、创造就业岗位、促进经济社会发展、增强综合国力作出了重要贡献。企业家是经济活动
                  要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累
                  财富、创造就业岗位、促进经济社会发展、增强综合国力作出了重要贡献。
                </p>
              </div>
              <div class="link">
                <i class="suncnui suncnui-icon-yinyong"></i>
                <a href="#">https://www.oschina.net/p/tucodec?nocache=1589420598736</a>
              </div>
              <div class="pageSize">
                <span class="last-page">
                  <a-icon type="left" />上一篇
                </span>
                <span class="next-page">
                  下一篇
                  <a-icon type="right" />
                </span>
              </div>
            </div>
          </div>
        </a-card>
      </div>
      <div class="section emotional-analysis-content">
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>情感总体趋势分析</span>
          </h3>
          <div class="emotional-content">
            <emotionEcharts ref="echarts09" id="echarts09" :data="echarts04Data"></emotionEcharts>
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>精选评论</span>
            <i>(18条结果)</i>
          </h3>
          <div class="emotional-table card-table">
            <a-table :columns="emotionalColumns" :data-source="emotionalData" :pagination="false">
              <template slot-scope="text,record" slot="evaluation">
                <div
                  class="td-detail"
                  v-if="record.isShowMore === false"
                >{{ record.evaluation|ellipsis}}</div>
                <div class="td-detail" v-else>{{ record.evaluation}}</div>
                <div class="more-btrn" v-if="record.evaluation.length > 34">
                  <div v-if="record.isShowMore === false" @click="detailMoreBtn(record)">
                    <span>查看更多</span>
                    <a-icon type="down" />
                  </div>
                  <div v-else @click="detailMoreBtn(record)">
                    <span>收起</span>
                    <a-icon type="up" />
                  </div>
                </div>
              </template>
            </a-table>
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>各渠道情感因子分析</span>
          </h3>
          <div class="emotional-content">
            <channelEmotionEchart ref="echarts10" id="echarts10" />
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>各渠道情感单体分析</span>
          </h3>
          <div class="emotional-content">
            <separateChannel ref="echarts11" id="echarts11" />
          </div>
        </a-card>
      </div>
      <div class="section text-analysis-content">
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>热词分析</span>
          </h3>
          <div class="hotword-content">
            <wordcloud ref="echarts12" id="echarts12" :data="echarts12Data" />
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>实体识别</span>
          </h3>
          <div class="recognition-content">
            <recognitionBox color="#ffb12a" titleName="政策法规" :listData="nameList" />
            <recognitionBox color="#ff8041" titleName="人名" :listData="name" />
            <recognitionBox color="#18a8eb" titleName="地名" :listData="name" />
            <recognitionBox color="#93ca55" titleName="机构名" :listData="name" />
          </div>
        </a-card>
      </div>
      <div id="nac" style="height:500px;width:100%;"></div>
    </div>
    <QuoteModal :quoteVisible="quoteVisible" @closeFunc="quoteVisible = false"></QuoteModal>
  </div>
</template>
<script>
import circuitEcharts from "components/configuration/messageDetail/circuitEcharts";
import emotionEcharts from "components/configuration/messageDetail/emotionEcharts";
import channelEmotionEchart from "components/configuration/messageDetail/channelEmotionEchart";
import separateChannel from "components/configuration/messageDetail/separateChannel";
import elementResizeDetectorMaker from "element-resize-detector";
import QuoteModal from "@/components/configuration/quoteSetting/quoteModal";
import wordcloud from "@/components/configuration/messageDetail/wordcloud";
import recognitionBox from "@/components/base/recognitionBox";
import backTop from "@/components/base/backTop";
import timeLine from "@/components/base/timeLine";
export default {
  components: {
    circuitEcharts,
    emotionEcharts,
    channelEmotionEchart,
    separateChannel,
    QuoteModal,
    wordcloud,
    recognitionBox,
    timeLine,
  },
  data() {
    return {
	  quoteVisible:false,
      timeLineList: [
        {
          timestamp: "2013-10-6",
          websiteList:[
            {
              id:1,
              name:'外交部门户'
            },
          ]
        },
        {
          timestamp: "2014-10-6",
          websiteList:[
            {
              id:1,
              name:'外交部门户'
            },
            {
              id:2,
              name:'人民网'
            },
            {
              id:3,
              name:'新华社'
            }
          ]
        },
        {
          timestamp: "2015-10-6",
         websiteList:[
            {
              id:1,
              name:'凤凰网'
            }
          ]
        },
        {
          timestamp: "2016-10-6",
          websiteList:[
            {
              id:1,
              name:'测试名字长度'
            },
            {
              id:2,
              name:'人民网'
            }
          ]
        },
        {
          timestamp: "2017-10-6",
          websiteList:[
            {
              id:1,
              name:'外交部门户'
            },
            {
              id:2,
              name:'人民网'
            }
          ]
        },
        {
          timestamp: "2018-10-6",
          websiteList:[
            {
              id:1,
              name:'外交部门户'
            },
            {
              id:2,
              name:'人民网'
            }
          ]
        },
        {
          timestamp: "2019-10-6",
          websiteList:[
            {
              id:1,
              name:'外交部门户'
            },
            {
              id:2,
              name:'人民网'
            }
          ]
        }
      ],
      keywordList: ["测试1", "测试2", "测试3"],
      echarts04Data: [
        { id: 1, name: "正向", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { id: 1, name: "中立", data: [123, 345, 678, 111, 2367, 1234, 890] },
        { id: 1, name: "负向", data: [11, 234, 123, 765, 111, 345, 104] },
      ],
      emotionalData: [
        {
          key: "1",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "正向",
          isShowMore: false,
        },
        {
          key: "2",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "负向",
          isShowMore: false,
        },
      ],
      emotionalColumns: [
        {
          title: "评价",
          dataIndex: "evaluation",
          key: "evaluation",
          align: "center",
          width: "60%",
          scopedSlots: { customRender: "evaluation" },
        },
        {
          title: "评价时间",
          dataIndex: "time",
          key: "time",
          align: "center",
        },
        {
          title: "来源",
          dataIndex: "source",
          key: "source",
          align: "center",
        },
        {
          title: "情绪",
          dataIndex: "emotional",
          key: "emotional",
          align: "center",
        },
      ],
      testList: [
        {
          key: "1",
          time: "2001-01-01 01:00:00",
          text: "第一步第一步第一步第一步第一步",
        },
        {
          key: "2",
          time: "2002-02-02 02:00:00",
          text: "第二步第二步第二步第二步第二步",
        },
        {
          key: "3",
          time: "2003-03-03 03:00:00",
          text: "第三步第三步第三步第三步第三步",
        },
        {
          key: "4",
          time: "2004-04-04 04:00:00",
          text: "第四步第四步第四步第四步第四步",
        },
        {
          key: "5",
          time: "2005-05-05 05:00:00",
          text: "第五步第五步第五步第五步第五步",
        },
      ],
      scroll: "",
      list: [
        {
          name: "第三条",
          backgroundcolor: "#A7B293",
        },
      ],
      echarts06Data: [
        {
          value: 2,
          name: "腾讯网",
        },
        {
          value: 8,
          name: "搜狐网",
        },
        {
          value: 9,
          name: "微博",
        },
        {
          value: 12,
          name: "微信",
        },
      ],
      echarts12Data: [
        {
          name: "十九大精神",
          value: 15000,
        },
        {
          name: "两学一做",
          value: 10081,
        },
        {
          name: "中华民族",
          value: 9386,
        },
        {
          name: "马克思主义",
          value: 7500,
        },
        {
          name: "民族复兴",
          value: 7500,
        },
        {
          name: "社会主义制度",
          value: 6500,
        },
        {
          name: "国防白皮书",
          value: 6500,
        },
        {
          name: "创新",
          value: 6000,
        },
        {
          name: "民主革命",
          value: 4500,
        },
        {
          name: "文化强国",
          value: 3800,
        },
        {
          name: "国家主权",
          value: 3000,
        },
        {
          name: "武装颠覆",
          value: 2500,
        },
        {
          name: "领土完整",
          value: 2300,
        },
        {
          name: "安全",
          value: 2000,
        },
        {
          name: "从严治党",
          value: 1900,
        },
        {
          name: "现代化经济体系",
          value: 1800,
        },
        {
          name: "国防动员",
          value: 1700,
        },
        {
          name: "信息化战争",
          value: 1600,
        },
        {
          name: "局部战争",
          value: 1500,
        },
        {
          name: "教育",
          value: 1200,
        },
        {
          name: "职业教育",
          value: 1100,
        },
        {
          name: "兵法",
          value: 900,
        },
        {
          name: "一国两制",
          value: 800,
        },
        {
          name: "特色社会主义思想",
          value: 700,
        },
      ],
      navList: ["正文内容", "热点图谱", "情感分析", "文本分析"],
      current: 0,
      nameList: [
        {
          id: 1,
          name: "关于疫情疫情疫情疫情疫情疫情疫情的政策",
        },
        {
          id: 2,
          name: "关于疫情疫情疫情疫情疫情疫情疫情的政策",
        },
        {
          id: 3,
          name: "关于疫情疫情疫情疫情疫情疫情疫情的政策",
        },
        {
          id: 4,
          name: "关于疫情疫情疫情疫情疫情疫情疫情的政策",
        },
        {
          id: 5,
          name: "关于疫情疫情疫情疫情疫情疫情疫情的政策",
        },
      ],
      name: [
        {
          id: 1,
          name: "张无忌",
        },
        {
          id: 2,
          name: "赵敏",
        },
        {
          id: 3,
          name: "小乔",
        },
        {
          id: 4,
          name: "周瑜",
        },
        {
          id: 5,
          name: "张飞",
        },
      ],
    };
  },
  mounted() {
    this.watchDiv();
    //this.initTimeLine();
    //console.log(this.$route.query.flage)
  },
  methods: {
    getElement() {
      return document.getElementById("detail-content");
    },
    //查看更多
    detailMoreBtn(record, type) {
      record.isShowMore = !record.isShowMore;
    },
    //监控div宽度变化
    watchDiv() {
      let erd = elementResizeDetectorMaker();
      // 创建实例带参
      var erdUltraFast = elementResizeDetectorMaker({
        strategy: "scroll", //<- For ultra performance.
        callOnAdd: true,
        debug: true,
      });
      //监听id为test的元素 大小变化
      erd.listenTo(document.getElementById("detail-content"), (element) => {
        var width = element.offsetWidth;
        this.$refs.echarts06.erchartResize();
        this.$refs.echarts07.erchartResize();
        this.$refs.echarts08.erchartResize();
        this.$refs.echarts09.erchartResize();
        this.$refs.echarts10.erchartResize();
        this.$refs.echarts11.erchartResize();
        this.$refs.echarts12.erchartResize();
        this.$refs.timeLine.getMaxDrawNum();
      });
    },
    dataScroll: function () {
      this.scroll = document.getElementById("detail-content").scrollTop;
    },
    jump(index) {
      console.log(this.current);
      let jump = document.getElementsByClassName("section");
      // 获取需要滚动的距离
      let total = jump[index].offsetTop;
      let distance = document.getElementById("detail-content").scrollTop;
      let step = total / 10;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total;
        step = newTotal / 10;
        smoothUp();
      }
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.getElementById("detail-content").scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          document.getElementById("detail-content").scrollTop = total;
        }
      }
      function smoothUp() {
        if (distance > total) {
          distance -= step;
          document.getElementById("detail-content").scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          document.getElementById("detail-content").scrollTop = total;
        }
      }
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName("section");
      for (var i = sections.length - 1; i >= 0; i--) {
        if (Math.ceil(self.scroll) >= Math.ceil(sections[i].offsetTop)) {
          this.current = i;
          break;
        }
      }
    },
    /* 引用设置 */
    handlerClick() {
      this.quoteVisible = true;
    },
  },
  watch: {
    scroll: function () {
      this.loadSroll();
    },
  },
};
</script>


<style lang="stylus" scoped>
.default-message {
  height: calc(100% - 61px);
  position: relative;
  .suncnui{
    cursor pointer
  }
  .detail-content {
    width: 100%;
    height: 88%;
    background: #fff;
    overflow-y: auto;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;

    .section {
      margin-bottom: 15px;
    }
  }

  .content-nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 17px 0 35px 0;

    a:first-child {
      border: none;
    }

    .nav1 {
      display: inline-block;
      width: 124px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      background: #f6f7f9;
      color: #535353;
      font-size: 16px;
    }

    .current {
      background: #18a8eb;
      color: #fff;
      height: 58px;
      line-height: 58px;
      width: 104px;
      border-radius: 5px;
    }
  }

  .text-content {
    text-align: center;
    font-size: 16px;
    color: #333;
    position: relative;

    .btn-content {
      position: absolute;
      top: 0px;
      right: 0px;
    }

    h2 {
      font-weight: bold;
      font-size: 18px;
      width: 82%;
      margin: 0 auto;
      margin-bottom: 10px;
    }

    .message-content {
      font-size: 14px;
      margin-bottom: 10px;

      span {
        margin-right: 15px;
      }
    }

    .text-content-detail {
      text-indent: 2em;
      line-height: 1.5;

      p {
        text-align: left;
        margin: 10px 0px;
      }
    }
  }

  .hot-map-content {
    .action-content {
      margin-top: 40px;
    }

    .action-title {
      text-align: center;

      span {
        font-size: 15px;
        color: #333333;
        padding: 10px 20px 10px 30px;
        background-color: #ebf7ff;
        border-radius: 5px;

        i {
          vertical-align: middle;
        }
      }

      big {
        color: #1678fd;
        font-size: 25px;
        margin-left: 5px;
        vertical-align: sub;
      }
    }

    .reference-content {
      padding: 35px 16px 30px 16px;
      box-sizing: border-box;
      border: 1px solid #ececec;
      position: relative;

      h3 {
        font-size: 18px;
        color: #333333;
        font-weight: bold;
        width: 92%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 18px;
      }

      .keywords {
        font-size: 14px;
        color: #656b90;
        background: #f5f5f5;
        padding: 4px 15px;
        box-sizing: border-box;

        span {
          margin-right: 30px;
        }
      }

      .btn-content {
        font-size: 16px;
        color: #333;
        cursor: pointer;
        position: absolute;
        right: 16px;
        top: 35px;
      }

      .abstract-content {
        margin-top: 30px;

        .abstract-title {
          font-size: 16px;
          color: #787878;
          padding-left: 12px;
          border-left: 4px solid #18a8eb;
        }

        .abstract-detail-content {
          font-size: 16px;
          color: #333;
          line-height: 1.5;
        }
      }

      .link {
        font-size: 16px;
        color: #0f95d4;

        i {
          margin-right: 10px;
        }
      }

      .pageSize {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;

        span.last-page {
          margin-right: 35px;
          cursor: pointer;
        }

        span.next-page {
          color: #18a8eb;
          cursor: pointer;
        }
      }
    }
  }

  .emotional-analysis-content {
    .card-table {
      .ellipsis {
        width: 100%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .td-detail {
        text-align: left;
        font-size: 16px;
      }

      .more-btrn {
        text-align: center;
        color: #1678fd;
        font-size: 16px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }

  .card-content {
    box-shadow: 0 0 10px #dfe0e7;
    margin-bottom: 25px;
  }

  .card-title {
    font-size: 16px;
    color: #333;

    i {
      color: #ff7e00;
      margin-left: 10px;
    }

    span {
      position: relative;
      padding: 0 5px;
    }

    span:after {
      content: '';
      width: 100%;
      height: 4px;
      display: inline-block;
      position: absolute;
      background: rgba(253, 214, 152, 0.7);
      bottom: 0px;
      left: 0px;
    }
  }

  .back-top {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: absolute;
    right: 10px;
    bottom: 50px;
    z-index: 10;
    width: 40px;
    height: 40px;
    cursor: pointer;

    .ant-back-top {
      position: absolute;
      right: 20px;
      bottom: 50px;
    }

    .ant-back-top-content {
      width: 40px;
      height: 40px;
      overflow: hidden;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.45);
      border-radius: 20px;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }
}
</style>